<template>
    <div class="main_content">
        <div class="content">
            <div class="search">
                <div class="list">
                    <el-button type="primary" @click="goBack" style="margin-right:20px" size="small" plain>返回</el-button>
                </div>
                <div class="list">
                    <span>硬件SN码:</span>
                    <Input v-model="bound_sn" disabled style="width: 150px;margin-right:20px" clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <DatePicker type="datetime" placeholder="请选择起始时间" style="width: 200px;margin-right:20px" v-model="startTime" :clearable="false" @on-change="getStartTime"></DatePicker>
                    <input type="password" autocomplete="new-password" style="display: none" />
                    <span style="width: 30px">至</span>
                    <DatePicker type="datetime" placeholder="请选择截止时间" style="width: 200px;margin-right:20px" v-model="endTime" :clearable="false" @on-change="getEndTime"></DatePicker>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <el-button type="primary" @click="searchAll" style="margin-right:20px" size="small" plain>搜索</el-button>
                </div>
            </div>
            <div class="sub">
                <div class="left">
                    <ul v-if="list.length>0" class="items">
                        <li v-for="(item,index) in list" :key="index" :class="times == item.time?'active':''" @click="getTime(item)"> 
                            <span style="width:150px">{{item.time}}</span>
                            <span style="width:40px">{{item.batteryPower || 0 }}%</span>
                            <span style="width:40px">{{item.masterVer}}</span>
                            <span v-if="item.status == 1" style="width:40px">正常</span>
                            <span v-if="item.status == 2" style="width:40px">断电</span>
                            <span style="width:180px">{{item.lng}},{{item.lat}}</span>
                        </li>
                    </ul>
                    <ul v-else class="items">
                        <li style="background:none; border:none;justify-content:center">暂无数据</li>
                    </ul>
                    <div class="float-right" v-show="list.length>0">
                        <Page  style="text-align: right;" :current="current" :total="totalCount" :page-size="pageSize"  @on-change="pageChange"></Page>
                    </div>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <span>状态:</span>
                            <span v-if="status == 1">正常</span>
                            <span v-if="status == 2">断电</span>
                        </li>
                        <li>
                            <span>经度:</span>
                            <span>{{lng}}</span>
                        </li>
                        <li>
                            <span>纬度:</span>
                            <span>{{lat}}</span>
                        </li>
                    </ul>
                    <div class="data" v-if="frameList.length>0">
                        <div class="items" v-for="(item,index) in frameList" :key="index">
                            <div class="title">
                                <span>帧ID:{{item.frameIdHex}}</span>
                                <span>{{item.frameData}}</span>
                            </div>
                            <div class="table">
                                <el-table :data="item.frameDataItemList" height="240" >
                                    <el-table-column fixed prop="name" label="名称"></el-table-column>
                                    <el-table-column prop="code" label="编号" ></el-table-column>
                                    <el-table-column  label="详情" >
                                        <template slot-scope="scope">
                                            <span v-if="scope.row.valueDesc">{{scope.row.valueDesc}}</span>
                                            <span v-else>{{scope.row.value}}{{scope.row.unit}}</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                    <div v-else class="data"> 
                        <span>暂无数据</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getAllOBD,getAllOBDDetail } from "@/api/api.js";
import { formatDate } from "@/sever/utils.js";
export default {
    data() {
        return {
            startTime: new Date(new Date().valueOf() - 7200000),
            endTime: new Date(),
            bound_sn: "",
            list: [],
            pageNum: 1,
            pageSize: 20,
            current:1,
            times:"",
            status:"",
            lat:"",
            lng:"",
            frameList:[],
            totalCount:0,
        };
    },
    methods: {
        getStartTime(index) {
            this.startTime = index;
        },
        getEndTime(index) {
            this.endTime = index;
        },
        goBack() {
            this.$router.go(-1);
        },
        getList() {
            let params = {
                sn: this.bound_sn,
                startTime: formatDate(this.startTime, "yyyy-MM-DD HH:mm:ss"),
                endTime: formatDate(this.endTime, "yyyy-MM-DD HH:mm:ss"),
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            getAllOBD(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                        if( this.list.length > 0){
                            this.times = this.list[0].time;
                            this.getDetails(this.times)
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getDetails(time){
            let params ={
                sn: this.bound_sn,
                time:time,
            }
            getAllOBDDetail(params).then(res=>{
                if(res.code == 200) {
                    this.status = res.data.status;
                    this.lat = res.data.lat;
                    this.lng = res.data.lng;
                    this.frameList =res.data.frameList;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        getTime(item){
            this.times = item.time;
            this.getDetails(this.times);
        },
        pageChange(index){
            this.pageNum = index ;
            this.getList();
        },
        searchAll() {
            if (
                new Date(this.startTime).getTime() >
                new Date(this.endTime).getTime()
            ) {
                this.$Modal.warning({
                    title: "错误",
                    content: "截至时间不能小于起始时间",
                });
                return;
            }
            this.getList();
        },
    },
    mounted() {
        this.bound_sn = localStorage.getItem("sn");
        this.getList();
    },
};
</script>
<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
.main_content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .content {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-betweenn;
        align-items: center;
        .search {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            background: #fff;
            align-items: center;
            height: 60px;
            border-radius: 5px;
            padding: 10px;

            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                span {
                    width: 90px;
                }
            }
        }
        .sub{
            width: 100%;
            height: calc(100% - 70px) ;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            .left{
                width: 500px;
                height: 100%;
                background: #fff;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                .items{
                    width: 100%;
                    height: calc(100% - 60px);
                    // padding: 10px;
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    margin-top: 10px;
                    overflow-y: scroll;
                    li{
                        width: 100%;
                        height: 30px;
                        font-size: 16px;
                        background: #fff;
                        cursor: pointer;
                        box-shadow: 0 2px 4px rgba(3,27,78,.06);
                        border: 1px solid #E5E8ED;
                        margin-bottom: 5px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0 10px;
                        
                    }
                    .active{
                        background: #f3f3f3;
                    }


                }
                ul::-webkit-scrollbar {
                    display: none;
                }
            }
            .right{
                width: calc(100% - 510px);
                height: 100%;
                background: #fff;
                ul{
                    width: 98%;
                    height: 60px;
                    list-style: none;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 10px auto;

                    li{
                        width: 32%;
                        height: 60px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: #fff;
                        cursor: pointer;
                        box-shadow: 0 2px 4px rgba(3,27,78,.06);
                        border: 1px solid #E5E8ED;
                    }
                }
                .data{
                    width: 98%;
                    margin:0 auto;
                    height: calc(100% - 80px);
                    padding-bottom:10px;
                    display: flex;
                    flex-wrap: wrap;
                    overflow-y: scroll;
                    span{
                        width: 100%;
                        height: 100%;
                        font-size: 16px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .items{
                        width: 32%;
                        margin-right: 2%;
                        height: 300px;
                        background: #fff;
                        cursor: pointer;
                        box-shadow: 0 2px 4px rgba(3,27,78,.06);
                        border: 1px solid #E5E8ED;
                        margin-bottom: 10px;
                        .title{
                            width: 100%;
                            height: 40px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            box-shadow: 0 2px 4px rgba(3,27,78,.06);
                            border: 2px solid #E5E8ED;
                            font-size: 16px;
                        }
                    }
                    .items:nth-child(3n){
                        margin-right: 0%;
                    }
                }
                .data::-webkit-scrollbar {
                    display: none;
                }
            }
        }
    }
}
</style>


